<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #303133;
		}
		.box{
			width: 1200px;
			margin: 0 auto;
			background-color: #303133;
		}
		.header{
			display: flex;
			justify-content: space-between;
			color: white;
			align-items: center;
		}
		a{
			color: white;
			text-decoration: none;
			font-size: 12px;
			color: #777;
		}
		a:hover{
			color: red;
		}
		.music-list{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}
		.music-item{
			width: 216px;
			position: relative;
		}
		.music-item .icon{
			width: 192px;
			height: 192px;
			position: relative;
			left: 0;
			top: 0;
			z-index: 3;
		}
		.music-item p:nth-of-type(1){
			color: white;
			padding: 20px 0 10px 0;
		}
		.music-item p:nth-of-type(2){
			color: #909399;
			font-size: 14px;
		}
		.music-item p:nth-of-type(3){
			color: #909399;
			font-size: 14px;
		}
		.music-item .disc{
			width: 180px;
			height: 180px;
			position: absolute;
			top: 6px;
			right: 0px;
			z-index: 2;
			transition: all .5s;
		}
		.music-item:hover .disc{
			right: -10px;
		}
		.gedan{
			margin-top: 30px;
		}
		.gd-list{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}
		.gd-item{
			width: 216px;
			cursor: pointer;
		}
		.gd-item-img{
			width:100%;
			height: 216px;
			overflow: hidden;
		}
		.gd-item-img img{
			width: 100%;
			transition: all .8s;
		}
		.gd-item-img:hover img{
			transform: scale(1.2);
		}
		.gd-item-img:hover{
/*			width: 110%;*/
		}
		.gd-item p{
			color: white;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 10px;
		}
		.xg{
			margin-top: 30px;
		}
		.xg-list{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 10px;
		}
		.xg-item{
			width: 390px;
			height: 120px;
			background-color: black;
			margin: 10px 0;
			position: relative;
			align-items: center;
			cursor: pointer;
		}
		.xg-item-icon{
			width: 150px;
			display: inline-block;
		}
		.icon-a{
			width: 120px;
			height: 120px;
			position: relative;
			z-index: 3;
		}
		.icon-b{
			width: 110px;
			height: 110px;
			position: absolute;
			top: 5px;
			left: 25px;
			z-index: 2;
			transition: all .8s;
		}
		.xg-item-icon:hover .icon-b{
			left: 35px;
		}
		.xg-item span:nth-of-type(1){
			align-items: center;
		}
		.xg-item-text{
			display: inline-block;
			position: absolute;
			top: 30%;
		}
		.xg-item-text p:nth-of-type(1){
			color: white;
		}
		.xg-item-text p:nth-of-type(2){
			color: #777;
			font-size: 12px;
		}
		.xg-item:hover .xg-item-text p:nth-of-type(1){
			color: red;
		}
		.gs{
			margin-top: 30px;
		}
		.gs-list{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			margin-bottom: 50px;
		}
		.gs-item{
			width: 176px;
			text-align: center;
			cursor: pointer;
		}
		.gs-item p{
			color: white;
		}
		.gs-img{
			width: 176px;
			height: 176px;
			border-radius: 50%;
			overflow: hidden;
		}
		.gs-item img{
			transition: all .8s;
		}
		.gs-img:hover img{
			transform: scale(1.2);
		}
	</style>
</head>
<body>

	<div class="box">
		<div class="header">
			<h2>秀动发行</h2>
			<a href="">更多</a>
		</div>
		<div class="music-list">
			<div class="music-item">
				<img class="icon" src="https://img01.dmhmusic.com/0206/M00/D2/32/ChAKCGcvGguAHYU4AAUBwHBATAI383.jpg@w_200,h_200">
				<img class="disc" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
				<p>Nights Are Lonely</p>
				<p>Rain Dogs</p>
				<p>2023-02-10发行</p>
			</div>
			<div class="music-item">
				<img class="icon" src="https://img01.dmhmusic.com/0206/M00/D2/32/ChAKCGcvGguAHYU4AAUBwHBATAI383.jpg@w_200,h_200">
				<img class="disc" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
				<p>Nights Are Lonely</p>
				<p>Rain Dogs</p>
				<p>2023-02-10发行</p>
			</div>
			<div class="music-item">
				<img class="icon" src="https://img01.dmhmusic.com/0206/M00/D2/32/ChAKCGcvGguAHYU4AAUBwHBATAI383.jpg@w_200,h_200">
				<img class="disc" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
				<p>Nights Are Lonely</p>
				<p>Rain Dogs</p>
				<p>2023-02-10发行</p>
			</div>
			<div class="music-item">
				<img class="icon" src="https://img01.dmhmusic.com/0206/M00/D2/32/ChAKCGcvGguAHYU4AAUBwHBATAI383.jpg@w_200,h_200">
				<img class="disc" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
				<p>Nights Are Lonely</p>
				<p>Rain Dogs</p>
				<p>2023-02-10发行</p>
			</div>
			<div class="music-item">
				<img class="icon" src="https://img01.dmhmusic.com/0206/M00/D2/32/ChAKCGcvGguAHYU4AAUBwHBATAI383.jpg@w_200,h_200">
				<img class="disc" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
				<p>Nights Are Lonely</p>
				<p>Rain Dogs</p>
				<p>2023-02-10发行</p>
			</div>
		</div>
		<div class="gedan">
			<div class="header">
				<h2>热门歌单</h2>
				<a href="">更多</a>
			</div>
			<div class="gd-list">
				<div class="gd-item">
					<div class="gd-item-img">
						<img src="https://img01.dmhmusic.com/0101/M00/01/15/ChR45F8EMziAbmOuAAvEkWIYaK4254.jpg@w_300,h_300">
					</div>
					<p>高考|全力以赴吧,一生就这一次的机会</p>
				</div>
				<div class="gd-item">
					<div class="gd-item-img">
						<img src="https://img01.dmhmusic.com/0206/M00/90/AE/ChR47GgLLKuAEbRDAAROnHa-NsQ968.jpg@w_300,h_300">
					</div>
					<p>向光而行，劳动礼赞</p>
				</div>
				<div class="gd-item">
					<div class="gd-item-img">
						<img src="https://img01.dmhmusic.com/0105/M00/C2/31/ChR45WeExhOAJO5xABJiWYY5Wc8849.jpg@w_300,h_300">
					</div>
					<p>大自然白噪音：强效催眠进入深层睡眠</p>
				</div>
				<div class="gd-item">
					<div class="gd-item-img">
						<img src="https://img01.dmhmusic.com/0101/M00/CE/FB/ChAKCGdEFVWARkK-AAAhANtz16o947.jpg@w_300,h_300">
					</div>
					<p>高考|全力以赴吧,一生就这一次的机会</p>
				</div>
				<div class="gd-item">
					<div class="gd-item-img">
						<img src="https://img01.dmhmusic.com/0209/M00/80/96/ChR47Fz3hWCASl38AARf3i4qqDk809.jpg@w_300,h_300">
					</div>
					<p>高考|全力以赴吧,一生就这一次的机会</p>
				</div>
			</div>
		</div>
		<div class="xg">
			<div class="header">
				<h2>新歌推荐</h2>
				<a href="">更多</a>
			</div>
			<div class="xg-list">
				<div class="xg-item">
					<div class="xg-item-icon">
						<img class="icon-a" src="https://img01.dmhmusic.com/0513/M00/0A/43/ChAKB2hju8uARZJMAAyWdP31dIg726.jpg@w_120,h_120">
						<img class="icon-b" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
					</div>
					<div class="xg-item-text">
						<p>黑夜狂奔</p>
						<p>告五人</p>
					</div>
				</div>
				<div class="xg-item">
					<div class="xg-item-icon">
						<img class="icon-a" src="https://img01.dmhmusic.com/0102/M00/58/66/ChR45WhrNW6ABUPVABmIea9fAfo784.jpg@w_120,h_120">
						<img class="icon-b" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
					</div>
					<div class="xg-item-text">
						<p>新鲜每一天</p>
						<p>杨老师在东城</p>
					</div>
				</div>
				<div class="xg-item">
					<div class="xg-item-icon">
						<img class="icon-a" src="https://img01.dmhmusic.com/0208/M00/80/39/ChR47Gh1_t-AfFo8AAoOsCQRcEw145.jpg@w_120,h_120">
						<img class="icon-b" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
					</div>
					<div class="xg-item-text">
						<p>歹</p>
						<p>余佩真</p>
					</div>
				</div>
				<div class="xg-item">
					<div class="xg-item-icon">
						<img class="icon-a" src="https://img01.dmhmusic.com/0101/M00/2F/77/ChR45WhsetyAAh27AAz99ff31nk967.jpg@w_120,h_120">
						<img class="icon-b" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
					</div>
					<div class="xg-item-text">
						<p>背篓少年</p>
						<p>妹</p>
					</div>
				</div>
				<div class="xg-item">
					<div class="xg-item-icon">
						<img class="icon-a" src="https://img01.dmhmusic.com/0105/M00/25/DD/ChR45WhjqDuATDL1ABb7SfdbaTc356.jpg@w_120,h_120">
						<img class="icon-b" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
					</div>
					<div class="xg-item-text">
						<p>山东耍法</p>
						<p>涛子/PONYGO小马</p>
					</div>
				</div>
				<div class="xg-item">
					<div class="xg-item-icon">
						<img class="icon-a" src="https://img01.dmhmusic.com/0104/M00/82/4A/ChAKCGh0xyCAXqikAARGJvxNkPc942.jpg@w_120,h_120">
						<img class="icon-b" src="https://static1-qianqian.91q.com/client/img/disk_pic_album.358bdc5.png">
					</div>
					<div class="xg-item-text">
						<p>夜路</p>
						<p>SuSushi</p>
					</div>
				</div>
			</div>
		</div>
		<div class="gs">
			<div class="header">
				<h2>热门歌手</h2>
				<a href="">更多</a>
			</div>
			<div class="gs-list">
				<div class="gs-item">
					<div class="gs-img">
						<img src="https://img01.dmhmusic.com/0206/M00/70/E2/ChR47FtM6_qAYdtpAAJgVE2U6UI268.jpg@w_200,h_200">
					</div>
					<p>许嵩</p>
				</div>
				<div class="gs-item">
					<div class="gs-img">
						<img src="https://img01.dmhmusic.com/0206/M00/70/D3/ChR47FtM6zuAd4cPAALIQN9yml0668.jpg@w_200,h_200">
					</div>
					<p>林俊杰</p>
				</div>
				<div class="gs-item">
					<div class="gs-img">
						<img src="https://img01.dmhmusic.com/0206/M00/70/D2/ChR47FtM6zaACnN0AAGORct9T5c096.jpg@w_200,h_200">
					</div>
					<p>张杰</p>
				</div>
				<div class="gs-item">
					<div class="gs-img">
						<img src="https://img01.dmhmusic.com/0206/M00/71/8E/ChR461tM8-6AU69TACTnGAIb0dY110.jpg@w_200,h_200">
					</div>
					<p>汪苏泷</p>
				</div>
				<div class="gs-item">
					<div class="gs-img">
						<img src="https://img01.dmhmusic.com/0206/M00/70/D4/ChR47FtM60qAJ7WZAAGBpnp6XmI240.jpg@w_200,h_200">
					</div>
					<p>王力宏</p>
				</div>
				<div class="gs-item">
					<div class="gs-img">
						<img src="https://img01.dmhmusic.com/0206/M00/70/EC/ChR461tM7HaAJF2oAAEl3i_PAtY394.jpg@w_200,h_200">
					</div>
					<p>胡歌</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>